<template>
    <div>
        <n-card class="CreateProduct__content">
            <n-space vertical>
                <n-steps :current="current" status="process">
                    <n-step
                        title="基本信息"
                    />
                    <n-step
                        title="商品参数"
                    />
                    <n-step
                        title="商品属性"
                    />
                    <n-step
                        title="完成"
                    />
                </n-steps>
            </n-space>
            <br>
            <br>
            
            <n-card v-if="current==1">
                <n-form label-placement="top">
                    <n-form-item label="选择商品分类：" style="width: 400px;">
                        <n-cascader
                            v-model:value="selectValue"
                            placeholder="请选择"
                            :options="optionList"
                            :leaf-only="true"
                        />
                    </n-form-item>
                    <n-form-item label="商品名称：">
                        <n-input v-model:value="goodsProperties.goodsName" />
                    </n-form-item>
                    <n-form-item label="商品价格（元）：" style="width: 400px;">
                        <n-input-number v-model:value="goodsProperties.price" />
                    </n-form-item>
                    <n-form-item label="商品数量：" style="width: 400px;">
                        <n-input-number v-model:value="goodsProperties.num" />
                    </n-form-item>
                    <n-form-item label="商品重量（千克）：" style="width: 400px;">
                        <n-input-number v-model:value="goodsProperties.weight" />
                    </n-form-item>
                </n-form>
            </n-card>

            <n-card v-if="current==2">
                <div v-for="(item,index) in dynamicPropertiesByValue" :key="index">
                    {{item.propertiesName}}
                    <br>
                    <br>
                    <n-space>
                        <n-tag v-for="(t,i) in item.propertiesTags" :key="Number(i)" type="info" closable @close="()=>{
                                dynamicPropertiesByValue[index].propertiesTags.splice(i,1)
                            }
                            ">
                            {{t}}
                        </n-tag>
                    </n-space>
                    <br>
                </div>
            </n-card>

            <n-card v-if="current==3">
                <n-form label-placement="top">
                    <n-form-item :label="item.propertiesName" v-for="(item,index) in staticPropertiesByValue" :key="index">
                        <n-input v-model:value="item.propertiesTags" />
                    </n-form-item>
                </n-form>
            </n-card>
            <br>
            <br>
            <n-button-group>
                <n-button @click="prev">
                    上一步
                    <template #icon>
                        <n-icon>
                            <md-arrow-round-back />
                        </n-icon>
                    </template>
                </n-button>
                <n-button @click="next" v-if="current<3">
                    下一步
                    <template #icon>
                        <n-icon>
                            <md-arrow-round-forward />
                        </n-icon>
                    </template>
                </n-button>
                <n-button @click="create" v-if="current==3">
                    完成
                </n-button>
            </n-button-group>
        </n-card>  
    </div>
</template>

<script lang='ts'>
import { computed, defineComponent, reactive, ref } from 'vue'
import { MdArrowRoundBack, MdArrowRoundForward } from '@vicons/ionicons4'
import { NSpace,NSteps,NStep,NCard,NButtonGroup,NButton,NIcon,NForm,NFormItem,NCascader,NInputNumber,NInput,NDynamicTags,NTag  } from 'naive-ui';
import router from '../router';

export default defineComponent({
  components: {
    MdArrowRoundBack,
    MdArrowRoundForward,
    NSpace,NSteps,NStep,NCard,NButtonGroup,NButton,NIcon,NForm,NFormItem,NCascader,NInputNumber,NInput,NDynamicTags ,NTag
  },
  setup () {
    const selectValue=ref('');
    let dynamicProperties=reactive<[]>([]);
    let staticProperties=reactive<[]>([]);
    const goodsProperties=reactive<{}>({
        goodsName:null,
        price:null,
        num:null,
        weight:null,
        dynamicProperties:reactive<any[]>([]),
        staticProperties:reactive<any[]>([]),
    });

    /**
     * 获取动态参数
     */
    const dynamicPropertiesByValue=computed(()=>{
      let List=reactive<any[]>([]);
      if(selectValue.value)
      {
        let list=JSON.parse(localStorage.getItem('goodsClassificationList'));
        let strlist=selectValue.value.split(" ");
        if(list[strlist[0]].children[strlist[1]].children[strlist[2]]['dynamicProperties'])
        {
          for(let i=0;i<list[strlist[0]].children[strlist[1]].children[strlist[2]]['dynamicProperties'].length;i++)
          {
            const map=reactive<{}>({});
            let propertiesName=list[strlist[0]].children[strlist[1]].children[strlist[2]]['dynamicProperties'][i];
            map.propertiesName=propertiesName;
            let tags=list[strlist[0]].children[strlist[1]].children[strlist[2]]['dynamicPropertiesTags'][propertiesName];
            map.propertiesTags=tags;
            List[i]=map;
          }
        }
      }
      return List;
    });

    /**
     * 获取静态参数
     */
    const staticPropertiesByValue=computed(()=>{
      let List=reactive<any[]>([]);
      if(selectValue.value)
      {
        let list=JSON.parse(localStorage.getItem('goodsClassificationList'));
        let strlist=selectValue.value.split(" ");
        if(list[strlist[0]].children[strlist[1]].children[strlist[2]]['dynamicProperties'])
        {
          for(let i=0;i<list[strlist[0]].children[strlist[1]].children[strlist[2]]['staticProperties'].length;i++)
          {
            const map=reactive<{}>({});
            let propertiesName=list[strlist[0]].children[strlist[1]].children[strlist[2]]['staticProperties'][i];
            map.propertiesName=propertiesName;
            let tags=list[strlist[0]].children[strlist[1]].children[strlist[2]]['staticPropertiesTags'][propertiesName];
            console.log(tags);
            map.propertiesTags=tags.toString();
            List[i]=map;
          }
        }
      }
      return List;
    });

    /**
     * 获取选择参数
     */
    const optionList=computed(()=>{
      let list=JSON.parse(localStorage.getItem('goodsClassificationList'));
      let options: any[]=[];
      for(let i=0;i<list.length;i++)
      {
        if(list[i]["children"])
        {
          if(list[i]['children'][0].children)
          {
            options[i]=reactive<{}>({});
            options[i].label=list[i].classifyName;
            options[i].value=i+"";
            options[i].children=[];
            for(let j=0;j<list[i].children.length;j++)
            {
              if(list[i]['children'][j]['children'])
              {
                options[i].children[j]=reactive<{}>({});
                options[i].children[j].label=list[i].children[j].classifyName;
                options[i].children[j].value=i+" "+j;
                options[i].children[j].children=[];
                options[i].children[j].staticProperties=[];
                for(let k=0;k<list[i].children[j].children.length;k++)
                {
                  options[i].children[j].children[k]=reactive<{}>({});
                  options[i].children[j].children[k].label=list[i].children[j].children[k].classifyName;
                  options[i].children[j].children[k].value=i+" "+j+" "+k;
                }
              }
            }
          } 
        }
      }
      
      return options;
    });

    /**
     * 添加商品
     */
    const create=()=>{
        let list=JSON.parse(localStorage.getItem('goodsList'));
        goodsProperties.dynamicProperties=dynamicPropertiesByValue;
        goodsProperties.staticProperties=staticPropertiesByValue;
        goodsProperties.time=new Date().toLocaleString();
        goodsProperties.id=Date.parse(new Date().toString());
        list.push(goodsProperties);
        localStorage.setItem("goodsList",JSON.stringify(list));
        router.push("/goods/goods-list");
    }

    const current = ref(1);
    function next () {
        if (current.value === null) current.value = 1
        else if (current.value >= 4) current.value = null
        else {current.value++};
    }
    function prev () {
      if (current.value === 0) {current.value = null}
      else if (current.value === null) current.value = 4
      else current.value--
    }
    return {
      currentStatus: ref('process'),
      current,
      next,
      prev,
      optionList,
      selectValue,
      goodsProperties,
      staticPropertiesByValue,
      dynamicPropertiesByValue,
      close,
      create,
    }
  }
})
</script>

<style>
.CreateProduct__content{
  margin:24px 24px 24px;
  width: inherit;
  font-size:12px;
}
</style>